<template>
    <div class="app-container">
        <div class="head-container">
            <comm-search v-if="showSearch" @search="initList()" :query-param="queryParam">
                <template #left>
                    <!-- 搜索 -->
                </template>
            </comm-search>
        </div>
        <comm-tool :selections="selections" v-model:show-search="showSearch" :del-url="baseUrl" @refresh="initList()"
                   @toAdd="toAdd()" @edit="toEdit"/>
        <!--表单组件-->
        <comm-edit-dialog v-model:dialog-show="editDialogShow"
                          title="房间信息" @save="toSave" :save-loading="saveLoading">
            <template #content>
                <el-form ref="form" :inline="true" :model="formData" :rules="rules" label-width="80px">
                            <el-form-item label="id "prop="id">
                                    <el-input v-model="formData.id" placeholder="请输入"/>
                            </el-form-item>
                            <el-form-item label="房间名称 "prop="roomName">
                                    <el-input v-model="formData.roomName" placeholder="请输入房间名称"/>
                            </el-form-item>
                            <el-form-item label="房间编号 "prop="roomSc">
                                    <el-input v-model="formData.roomSc" placeholder="请输入房间编号"/>
                            </el-form-item>
                            <el-form-item label="所属酒库 "prop="wineId">
                                    <el-input v-model="formData.wineId" placeholder="请输入所属酒库"/>
                            </el-form-item>
                            <el-form-item label="测试酒库 "prop="testWine">
                                    <el-input v-model="formData.testWine" placeholder="请输入测试酒库"/>
                            </el-form-item>
                            <el-form-item label="详细地址 "prop="address">
                                    <el-input v-model="formData.address" placeholder="请输入详细地址"/>
                            </el-form-item>
                </el-form>
            </template>
        </comm-edit-dialog>
        <!--表格渲染-->
        <el-table :loading="loading" :data="dataList" @selectionChange="selectionChange" table-layout="auto">
            <el-table-column type="selection" width="55"/>
                        <el-table-column prop="id" label="id"/>
                        <el-table-column prop="roomName" label="房间名称"/>
                        <el-table-column prop="roomSc" label="房间编号"/>
                        <el-table-column prop="wineId" label="所属酒库"/>
                        <el-table-column prop="testWine" label="测试酒库"/>
                        <el-table-column prop="address" label="详细地址"/>
            <el-table-column label="操作" align="center" fixed="right">
                <template #default="scope">
                    <comm-operation :data="scope.row" :url="baseUrl" @edit="toEdit(scope.row)"
                                    @refresh="initList()"/>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-model:page="queryParam.page" v-model:limit="queryParam.size" :total="total" @change="initList()"/>
    </div>
</template>


<script setup>
    import {ref, toRefs, reactive, getCurrentInstance} from 'vue'
    import Pagination from '@/components/Pagination'
    import mixins from "@/mixins/mixins";
    import CommSearch from "@/components/Comm/CommSearch.vue";
    import CommSelect from "@/components/Comm/CommSelect.vue";
    import CommTool from "@/components/Comm/CommTool.vue";
    import CommEditDialog from "@/components/Comm/CommEditDialog.vue";
    import CommOperation from "@/components/Comm/CommOperation.vue";


    const pageData = reactive({
        rules: {
            roomName: [
                {required: true, message: '房间名称不能为空', trigger: 'blur'}
            ], 
        }
    })

    const {initList, total, dataList, data, selectionChange, toAdd, toEdit, toSave} = mixins()
    const {queryParam, loading, saveLoading, selections, showSearch, editDialogShow, formData, baseUrl} = toRefs(data)

    const {rules} = toRefs(pageData)

    const {proxy} = getCurrentInstance();

    baseUrl.value = '/room'

    initList()

</script>
